<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { GaugeChart } from "echarts/charts";
import { TitleComponent, TooltipComponent } from "echarts/components";
import VChart from "vue-echarts";

use([CanvasRenderer, GaugeChart, TitleComponent, TooltipComponent]);

export default {
  components: {
    VChart,
  },
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  computed: {
    option() {
      return {
        series: [
          {
            type: "gauge",
            center: ["50%", "60%"],
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: "90%",
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
              length: "12%",
              width: 20,
              offsetCenter: [0, "-50%"],
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              length: 12,
              lineStyle: {
                color: "auto",
                width: 2,
              },
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: "auto",
                width: 5,
              },
            },
            axisLabel: {
              color: "#666",
              fontSize: 12,
              distance: -40,
              formatter: function (value) {
                if (value === 100) {
                  return "优";
                } else if (value === 60) {
                  return "良";
                } else if (value === 20) {
                  return "差";
                }
                return "";
              },
            },
            title: {
              offsetCenter: [0, "-20%"],
              fontSize: 20,
              color: "#666",
            },
            detail: {
              fontSize: 30,
              offsetCenter: [0, "0%"],
              valueAnimation: true,
              formatter: "{value}%",
              color: "inherit",
            },
            data: [
              {
                value: this.data.value,
                name: this.data.name,
              },
            ],
          },
        ],
      };
    },
  },
};
</script>

<style scoped>
.chart {
  height: 300px;
}
</style>
